import React, { memo, useState } from "react";
import { XProvider } from "./context/XContext";
import { YProvider } from "./context/YContext";
import { Parent } from "./parent";

/**
 * 1. 设计模式：生产者消费者模式
 * 2. 类型: 组件间，单一维度数据状态变更。
 * 3. 问题：
 *  1. 不同的 context 要拆分，非消费者也会触发渲染
 *  2. 抽象对象的 provider 组件，避免不必要的渲染
 *  3. 使用 useContext 代替 xxxContext.Consumer
 */
export const Basic = memo(() => {
  const [x, setX] = useState(0);
  const [y, setY] = useState(0);

  return (
    <XProvider value={x} updateValue={setX}>
      <YProvider value={y} updateValue={setY}>
        <Parent />
      </YProvider>
    </XProvider>
  );
});
